/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-13 14:56:49
 * @LastEditTime: 2023-03-16 14:57:12
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import {
  Alert,
  AlertDescription,
  AlertIcon,
  Button,
  Flex,
  FormControl,
  FormErrorMessage,
  FormLabel,
  Input,
  Stack,
  Text,
} from '@chakra-ui/react';
import { Field, FieldProps, Formik } from 'formik';

import { useAppSelector } from '@/store/hooks';

export default function TransactionForm() {
  const { loading } = useAppSelector((state) => state.user);

  const handleUpdate = (values: any) => {
    console.log('handleUpdatePassword', values);
  };

  return (
    <Flex direction="column" gap="4" p="2">
      <Alert status="warning" rounded="md">
        <AlertIcon />
        <AlertDescription>划转后的积分仅限用于本软件绘画使用</AlertDescription>
      </Alert>
      <Flex gap="1" align="center">
        <Text fontWeight="600" fontSize="md">
          当前推广佣金余额: ¥{' '}
        </Text>
        <Text fontWeight="600" fontSize="xl">
          3,000
        </Text>
        <Text fontWeight="600" fontSize="md">
          图蝇币
        </Text>
      </Flex>

      <Formik
        initialValues={{
          amount: '',
        }}
        onSubmit={(values) => {
          handleUpdate(values);
        }}
      >
        {({ handleSubmit, errors, touched }) => (
          <form onSubmit={handleSubmit}>
            <Stack spacing={4}>
              <Field
                name="amount"
                validate={(value: string) => {
                  let error;
                  if (!value) {
                    error = '请输入图蝇币数量';
                  }
                  if (Number.isNaN(Number(value))) {
                    error = '请输入正确图蝇币数量';
                  }
                  if (Number(value) > 3000) {
                    error = '请输入少于当前余额的图蝇币数量';
                  }
                  return error;
                }}
              >
                {({ field }: FieldProps) => (
                  <FormControl
                    isRequired
                    isInvalid={Boolean(errors.amount && touched.amount)}
                  >
                    <FormLabel htmlFor="amount" fontWeight="600">
                      划转图蝇币
                      <Text as="span" fontSize="sm">
                        (1图蝇币兑换1小时)
                      </Text>
                      :
                    </FormLabel>
                    <Input
                      id="amount"
                      type="text"
                      {...field}
                      placeholder="请输入需要划转到账户积分的图蝇币"
                    />
                    <FormErrorMessage>
                      {errors.amount as string}
                    </FormErrorMessage>
                  </FormControl>
                )}
              </Field>
              <Flex justify="center">
                <Button
                  w="max-content"
                  isLoading={loading}
                  loadingText="Submitting"
                  type="submit"
                  variant="outline"
                >
                  提交
                </Button>
              </Flex>
            </Stack>
          </form>
        )}
      </Formik>
    </Flex>
  );
}
